@value unit, blue-color, gray-color, link-hover-color from  "../global/global.css";

.header {
  display: flex;
  align-items: baseline;

  height: calc(unit * 7);
  padding: 0 calc(unit * 4);

  line-height: calc(unit * 7 - 5);
}

.item {
  margin-right: calc(unit * 4);
}

.tray {
  composes: header;

  margin-left: auto;
  padding: 0;
}

.trayItem {
  text-align: center;
}

.trayItemContent {
  height: calc(unit * 5);
}

.iconPosition.iconPosition {
  width: calc(unit * 5);
  height: calc(unit * 5);

  vertical-align: baseline;

  &:global(.ring-icon) {
    /* Redefine positioning inside ring-link */

    top: 0;
  }
}

.iconBehavior {
  cursor: pointer;
  transition: all 0.3s ease-out;
  transform: rotate(0deg);
  transform-origin: center 27px;

  &:hover {
    transition: transform 0.3s ease-out;

    color: link-hover-color;
  }
}

.icon {
  composes: iconPosition;
  composes: iconBehavior;

  color: gray-color;
}

.activeIcon {
  composes: icon;

  @nest &, &:hover {
    color: blue-color;
  }
}

.rotatedIcon {
  transform: rotate(90deg);
}

.profileEmpty {
  composes: iconPosition;

  position: relative;
  top: unit;

  /* Fix popup vertical positioning */

  height: calc(unit * 4);

  text-align: right;
}

.profile {
  composes: profileEmpty;
  composes: iconBehavior;
}

.loginButton.loginButton {
  margin-left: unit;
}

.profileMenuItem {
  white-space: nowrap;
}

.hasUpdates::after {
  position: absolute;
  top: 1px;
  left: 35px;

  display: block;

  width: unit;
  height: unit;

  content: '';

  border: 1px solid #fff;
  border-radius: 50%;

  background-color: link-hover-color;
}
